<style lang='less'>
	.cus-input {
		input[type=number] {  
	    -moz-appearance:textfield;
		}
		input[type=number]::-webkit-inner-spin-button,  
		input[type=number]::-webkit-outer-spin-button {  
		    -webkit-appearance: none;
		}
		.error-span {
	    position: absolute;
	    top: 50%;
	    margin-top: -5px;
	    left: 100%;
	    line-height: 10px;
	    white-space: nowrap;
	    &::before {
		    content: '✖';
		    color: red;
		    margin: 0 6px 0 20px;
			}
	  }
	}
	.eye-icon {
		width:18px;
		height: 10px;
		border:solid 1px;
		border-radius: 50%;
		position: absolute;
    top: 50%;
    right: 2px;
    margin-top: -5px;
    &::after {
    	display: block;
    	content: "";
    	width: 6px;
    	height: 6px;
    	position: absolute;
    	left: 5px;
    	top: 1px;
    	border-radius: 50%;
    	border:solid 1px;
    }
    &.passwd {
    	&::after {
    		background-color: #c0c4cc;
    	}
    }
	}
</style>
<template>
	<el-row :id="'input_'+name" class="cus-input">
		<el-popover
		  placement="right"
		  trigger="manual"
		  :value="popover_visiable">{{v_input_error}}
	  	<el-input :clearable="clearable&&type!='password'" slot="reference" :disabled="disabled" :placeholder="placeHolder" :type="input_type" @mouseover.native="inputHover" @mouseout.native="inputOut" @keypress.native="keypressHandle" :class="'form-input'+(v_input_error?' input-error':'')" :maxlength="maxlength" v-model="v_input_val" @change="inputHandle(1)" @input="inputHandle(2)" @input.native="testNative">
				<template slot="append"><slot name="append"></slot></template>
				<div slot="suffix" :class="'eye-icon'+(!passwd_cansee?' passwd':'')" v-if="type=='password'" v-show="eye_icon_show" @click="triggerPasswdSee"></div>
			</el-input>
		</el-popover>
		<div :class="'error-span'+(v_input_error?'':' isok')" v-if="has_err_span && v_input_error">{{v_input_error}}</div>
	</el-row>
</template>
<script>
	import Vue from 'vue';
	export default {
		props: {
			name: '',
			v_input: '',
			v_input_error: {
				default: null
			},
			has_err_span: {	//是否显示错误信息
				default: false
			},
			type: {
				default: 'text'
			},
			no_space: {	//不支持空格输入
				default: true
			},
			no_chinese: {	//不支持中文输入
				default: false
			},
			maxlength: '',
			max_decimals_len: '',	//最大小数位
			right_length: '',	//延迟检测时设置一个提前检测的输入长度
			placeHolder: '',
			delay_check: {	//是否延迟检测，第一次检测在失去焦点后
				default: true
			},
			disabled: {
				default: false
			},
			clearable: {
				default: true
			}
		},
		data(){
			return {
				v_input_val: this.v_input,
				v_input_val_bak: this.v_input,
				passwd_cansee: false,
				eye_icon_show: false,
				popover_visiable: false
			}
		},
		watch: {
			v_input(val='') {
				this.v_input_val = val;
				this.v_input_val_bak = val;
				if(!val) {
					this.passwd_cansee = false;
				}
			},
			v_input_val(val) {
				this.$emit('update:v_input', val);
			},
			v_input_error(val) {
				this.$nextTick(()=>{
					this.popover_visiable = Boolean(this.v_input_error) && !this.has_err_span;
				})
			}
		},
		computed: {
			input_type() {
				return this.type=='number' || this.passwd_cansee ?'text':this.type;
			}
		},
		methods: {
			inputHover() {
				this.eye_icon_show = true;
			},
			inputOut() {
				this.eye_icon_show = false;
			},
			triggerPasswdSee() {
				this.passwd_cansee = !this.passwd_cansee;
			},
			testNative(event){
				if(this.type=='number' || this.no_chinese) {
					var t_data = event.data;
					if((this.type=='number' && t_data && !/[\d\.]/.test(t_data)) || (this.no_chinese && /[^\x00-\xff]/.test(this.v_input_val))) {
						Vue.nextTick(()=>{this.v_input_val = this.v_input_val_bak;})
					}else {
						this.v_input_val_bak = this.v_input_val;
					}
				}
			},
			keypressHandle(event){
				var res = true;
				var k_code = event.keyCode||event.charCode;
				if(k_code != 8) {
					if(this.type=='number') {
						var t_decimals_len = Number(this.max_decimals_len);
						var t_v_input_val = this.v_input_val;
						if(t_v_input_val) {
							t_v_input_val = t_v_input_val + '';
						}
						var v_index = t_v_input_val?t_v_input_val.indexOf('.'):-1;
						if(t_decimals_len && t_v_input_val) {
							if(~v_index && (t_v_input_val.length - v_index) > t_decimals_len) {
								res = false;
								this.$message({
			            type: 'warning',
			            message: '小数位长度不超过'+t_decimals_len+'位'
			          });
							}
						}
						var reg_exp = t_decimals_len==0 || (t_v_input_val && ~v_index) || t_v_input_val==''||t_v_input_val==null ? /[\d]/ : /[\d\.]/;
						res = res && reg_exp.test(String.fromCharCode(k_code));
					}else if(this.no_space) {
						res = k_code != 32
					}
				}
				if(!res) {
					event.preventDefault();
				}
				return res;
			},
			inputHandle(type) {
				var temp_v_input = this.v_input_val;
				if(temp_v_input == null) return null;
				if(this.delay_check && ((type == 1 && this.v_input_error != null) || (type == 2 && this.v_input_error == null && temp_v_input.length!=this.right_length)))
					return null;
				this.$nextTick(()=>{this.$emit('errorCheck');})
			}
		}
	}
</script>